<!DOCTYPE html >
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head th:include="header">
<body>
<div id="userapp" v-cloak>
        <div>
            <el-form :inline="true" ref="queryFormRef" :model="queryForm" class="demo-form-inline">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="queryForm.username" placeholder="用户名"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="locked">
                    <my-dict-select v-model="queryForm.locked" type="locked"></my-dict-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="myQuery">查询</el-button>
                    <el-button @click="resetForm('queryFormRef')">重置</el-button>
                    <my-btn type="primary" label="新增" @click="myAdd" auth="sys:user:add"></my-btn>
                </el-form-item>
            </el-form>
            <my-table :columns="tableColumns" :page="page" v-on:pagesizechange="pagesizechange" v-on:currentpagechange="currentpagechange"></my-table>
            <el-dialog :title="addOrUpdateForm.title" :visible.sync="addOrUpdateForm.userFormVisible" width="400px">
                <el-form ref="addOrUpdateFormRef" :rules="rules" :model="addOrUpdateForm.user">
                    <el-upload
                            class="avatar-uploader"
                            action="/oss/upload"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                        <img v-if="addOrUpdateForm.user.picUrl" :src="addOrUpdateForm.user.picUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <el-form-item label="用户名" :label-width="addOrUpdateForm.userFormLabelWidth" prop="username"
                                  required>
                        <el-input v-model="addOrUpdateForm.user.username" autocomplete="off"
                                  placeholder="用户名"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" prop="sex" :label-width="addOrUpdateForm.userFormLabelWidth">
                        <my-dict-select v-model="addOrUpdateForm.user.sex" type="sex"></my-dict-select>
                    </el-form-item>
                    <el-form-item label="手机号" prop="mobile" :label-width="addOrUpdateForm.userFormLabelWidth"
                                  required>
                        <el-input v-model="addOrUpdateForm.user.mobile" autocomplete="off"
                                  placeholder="手机号"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="email" :label-width="addOrUpdateForm.userFormLabelWidth">
                        <el-input v-model="addOrUpdateForm.user.email" autocomplete="off"
                                  placeholder="邮箱"></el-input>
                    </el-form-item>
                    <el-form-item label="生日" prop="birthday" :label-width="addOrUpdateForm.userFormLabelWidth">
                        <el-date-picker :picker-options="addOrUpdateForm.pickerOptions" type="date"
                                        placeholder="选择日期" v-model="addOrUpdateForm.user.birthday"
                                        style="width: 85%;"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="状态" prop="locked" :label-width="addOrUpdateForm.userFormLabelWidth">
                        <my-dict-select v-model="addOrUpdateForm.user.locked" type="locked"></my-dict-select>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="addOrUpdateForm.userFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveOrUpdate">确 定</el-button>
                </div>
            </el-dialog>
            <el-dialog :title="addOrUpdateForm.roleDialogTitle" :visible.sync="addOrUpdateForm.roleVisible" width="550px">
                <el-transfer  filterable v-model="addOrUpdateForm.userRole.roles" :props="{key: 'id', label: 'name'}" :titles="['未分配','已分配']" :data="addOrUpdateForm.userRole.roleData"> </el-transfer>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="addOrUpdateForm.roleVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveUserRole">确 定</el-button>
                </div>
            </el-dialog>
        </div>
</div>
<script src="/statics/js/modules/sys/user.js"></script>
<style>
    .avatar-uploader{
        text-align: center;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
</body>
</html>